<template>
<div id="app">
  <nav-bar title="核销明细" left-arrow @clickLeft="$goPageBack('order/list')" />
  <template v-if="list && list.length > 0">
    <div class="panel-box mg-all" v-for="item in list" :key="item.code">
      <div class="panel-head">
        {{item.product_name}}
      </div>
      <ul class="panel-list">
        <li>
          <van-row>
            <van-col class="title" span="7">核销套餐</van-col>
            <van-col class="desc" span="17">{{item.sku_name}}</van-col>
          </van-row>
        </li>
        <li>
          <van-row>
            <van-col class="title" span="7">核销时间</van-col>
            <van-col class="desc" span="17">{{item.created_at}}</van-col>
          </van-row>
        </li>
        <li>
          <van-row>
            <van-col class="title" span="7">核销数量</van-col>
            <van-col class="desc" span="17">{{item.consume_qty}}</van-col>
          </van-row>
        </li>
        <li>
          <van-row>
            <van-col class="title" span="7">使用核销码</van-col>
            <van-col class="desc" span="17">{{item.code}}</van-col>
          </van-row>
        </li>
        <li v-if="item.traveler">
          <van-row>
            <van-col class="title" span="7">出行人</van-col>
            <van-col class="desc" span="17">{{item.traveler}}</van-col>
          </van-row>
        </li>
      </ul>
    </div>
  </template>
  <no-data :text="errMsg" v-else-if="!isOnLoading" />
  <slogan class="mg-top-xxl" />
</div>
</template>

<script>
import {
  Row,
  Col,
  Toast,
} from 'vant'
import NavBar from "@cmpt/header/navbar"
import NoData from '@cmpt/no-data'
import Slogan from '@cmpt/slogan'

import {
  getVoucherRecord,
} from "@api/modules/order"
import {
  getErrInfo,
} from "@api/http"

export default {
  name: 'voucher-record',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,

    NavBar,
    NoData,
    Slogan,
  },

  data() {
    return {
      order_no: this.$getUrlParam('order_no') || '',
      list: null,
      errMsg: '',
      isOnLoading: false,
    }
  },

  methods: {
    async getData() {
      this.isOnLoading = true
      Toast.loading({
        duration: 10000,
        forbidClick: true
      })
      getVoucherRecord({
        order_no: this.order_no,
      }).then(res => {
        this.isOnLoading = false
        Toast.clear()
        this.list = res.data.list || []
      }).catch(err => {
        this.list = null
        const {
          msg
        } = getErrInfo(err)
        this.errMsg = msg
        this.isOnLoading = false
      })
    },
  },

  created() {
    this.getData()
  },
}
</script>

<style lang="less" src="@style_m/components/panel.less"></style>
